<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <style>
        .inputremindPeple {
            max-width: 200px;
            height: 20px;
            display: inline-block;
        }

        .aprovalSystemTable thead th {
            text-align: center;
        }

        .sheding .form-control{
            max-width:49px;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
    </style>

</head>

<body class="white-bg" style="color:#333;padding:3px;">
<div class="page-heade">
       <h2 class="title_color text-center">网点基准销量</h2>
    </div>
<div class="row white-bg setRemindPeopleK" style="margin:10px">
    <form action="" class="form-inline" id="add">
        <table class="table table-bordered white-bg">
            <tr>
                <td colspan="1" class="text-right"><label for="">经销商名称<span class="redColor">*</span>：</label></td>
                <td colspan="4">
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="input-group" id="jxs_input" {if isset($supply)}style="display:none;"{/if}>
                                <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="remainMan" name="jxs_id" value="{:isset($supply)?$supply.jxs:''}">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                            <div id="jxs_queding" class="selectedOnlyOne" {if !isset($supply)}style="display:none;"{/if} >
                                <span class="inin">{:isset($supply)?$supply.jxs_title:''}</span>
                                <span class="close">×</span>
                            </div>
                        </div>
                        <div class="col-xs-2">
                            <!--<button class="btn btn-primary" id="select">选择</button>-->
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="1" class="text-right"><label for="">网点名称<span class="redColor">*</span>：</label></td>
                <td colspan="4">
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="input-group" id="jxs_input2" {if isset($supply)}style="display:none;"{/if}>
                            <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="remainMan2" name="net_id" value="{:isset($supply)?$supply.jxs:''}">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                        <div id="jxs_queding2" class="selectedOnlyOne" {if !isset($supply)}style="display:none;"{/if} >
                        <span class="inin">{:isset($supply)?$supply.jxs_title:''}</span>
                        <span class="close">×</span>
                    </div>
                    </div>
                    <div class="col-xs-2">
                        <!--<button class="btn btn-primary" id="select2">选择</button>-->
                    </div>
                    </div>
                </td>
            </tr>
            <tr>

                <td colspan="1" class="text-right"><label for="">产品名称：</label></td>
                <td colspan="4">
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="input-group" id="category_input">
                                <input type="text" class="form-control inputremindPeple"placeholder="请输入关键字或空格查询" id="categoryName" >
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                            <div id="category_queding" class="selectedOnlyOne" style="display: none;">
                                <span class="inin"></span>
                                <span class="close">×</span>
                            </div>

                        </div>
                        <div class="col-xs-8">
                           <!-- <button class="btn btn-primary" id="select_category">选择</button>-->
                            <button class="btn btn-primary" type="button" id="clear">清空</button>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="1" class="text-right"><label for="">您选定的产品：</label></td>
                <td colspan="4">
                    <div class="duoxuan" id="renyuan2">
                    </div>
                </td>
            </tr>
        </table>


        <table class="table table-bordered white-bg text-center sheding" id="table1">
            <thead>
            <tr class="info">
                <td rowspan="2">产品名称</td>
                <td rowspan="2">产品编号</td>
                <td colspan="{:count($kaoheqi2s)}">二级考核期</td>
                <td rowspan="2">总数量
                </td>
                <td rowspan="2" >平均数量
                </td>
            </tr>
            <tr class="info">
                {volist name="kaoheqi2s" id="row"}
                <td>{$row.title}</td>
                {/volist}
            </tr>
            </thead>
            <tbody></tbody>
           <!-- <tr>
                <td style="width:9.2%;">
                    <input name="pro[pro_id][]" value="" type="hidden">
                    <input name="pro[name][]"  value="" type="text" style="max-width:100px;" class="form-control">
                </td>
                <td style="width:9.2%;">
                    <input name="pro[sn][]" value="" type="hidden">
                    111</td>
                <td style="width:5.633%;"><input name="pro[a1][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a2][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a3][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a4][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a5][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a6][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a7][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a8][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a9][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a10][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a11][]" type="text" class="form-control">箱</td>
                <td style="width:5.633%;"><input name="pro[a12][]" type="text" class="form-control">箱</td>
                <td style="width:7.0%;"><input name="pro[sum][]" type="text" class="form-control"></td>
                <td style="width:7.0%;"><input name="pro[avg][]" type="text" class="form-control"></td>
            </tr>-->
        </table>
        <div class="col-md-12 text-center">
            <button class="btn btn-success" id="tijiao">保存</button>
            <button class="btn btn-warning" id="cancelBack">返回</button>
        </div>
    </form>
</div>

<!-- 全局js -->
{include file="Public/footer"}
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script>
    $("#clear").click(function(){
        swal({
             title:"警告",
              text: "您确定要清空所有产品嘛？",
              type: "warning",
              showCancelButton: true,
              confirmButtonColor: "#DD6B55",
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              closeOnConfirm: true
            },
            function(){
               $("#renyuan2").html("");
        $("#table1 tbody").html("");
            });
    })

    //弹出产品树
    $('#select_category').click(function () {
        if($('#remainMan2').val()==''){
            parent.swal('请先选择网点名称','','error');
            return false
        }
        var remainMan2 = $('#remainMan2').val()
        var index = parent.layer.getFrameIndex(window.name)
        parent.layer.open({
            type:2,
            area:['60%','60%'],
            maxmin:true,
//            content:'{:url("selectProduct")}?index='+index+'&keyword='+remainMan2
            content:'{:url("selectProduct")}?index='+index
        })
        return false
    })

    $("#categoryName").bsSuggest({showBtn: false})
    $("#categoryName").bsSuggest('disable')

    $('body').on('click','.ren .close',function () {
        var id = $(this).closest('.ren').data('id')
        $('#id'+id).remove()
        $(this).closest('.ren').remove()
    })
    $('body').on('click','.selectedOnlyOne .close',function () {
        $(this).closest('.selectedOnlyOne').hide().find('.inin').html('')
        $('#jxs_input2').show().find('input').val('')
    })

    //经销商搜索自动补全
    $("#remainMan").bsSuggest({
        url: "{:url('select/jxsjson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onDataRequestSuccess', function (e, result) {
        console.log('onDataRequestSuccess: ', result);
    }).on('onSetSelectValue', function (e, keyword, data) {
        $('#jxs_queding').find('.inin').html(keyword.key)
        $('#jxs_queding').show()
        $('#jxs_input').hide()
        $('#jxs_input').find('input').val(keyword.id)
        //console.log('onSetSelectValue: ', keyword, data);


        $("#remainMan2").bsSuggest('destroy')
        var catbs = $("#remainMan2").bsSuggest({
            url: "{:url('select/netjson')}?keyword="+$('#remainMan').val(),
            effectiveFieldsAlias:{title: "名称"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        });

        //网点名称
        $("#remainMan2").bsSuggest('enable')
        catbs.on('onSetSelectValue', function (e, keyword, data) {
            $('#jxs_queding2').find('.inin').html(keyword.key)
            $('#jxs_queding2').show()
            $('#jxs_input2').hide()
            $('#jxs_input2').find('input').val(keyword.id)

            $.post('{:url("get_net_pros")}',{id:keyword.id},function(re){
                var data=JSON.parse(re);
                var pros=data[0];
                for(var i=0;i<pros.length;i++){
                     $('#renyuan2').append('<span class="ren" data-id="'+pros[i]["id"]+'">'+pros[i]["pro_name"]+'<span class="close">×</span></span>')
                }
                var strs=data[1];
                for(var i=0;i<strs.length;i++){
                    $("#table1 tbody").append(strs[i]);
                }
            })
            //产品名称
            $("#categoryName").bsSuggest('destroy')
            $("#categoryName").bsSuggest({
//                url: "{:url('select/product')}?keyword="+keyword.id,
                url: "{:url('select/product')}",
                effectiveFieldsAlias:{title: "名称"},
                ignorecase: true,
                showHeader: true,
                showBtn: false,     //不显示下拉按钮
                delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
                idField: "id",
                keyField: "title",
                clearable: true
            }).on('onSetSelectValue', function (e, keyword, data) {
                $(this).val('')
                var bool = false
                $('#renyuan2 .ren').each(function (idx,o) {
                    if($(this).data('id') == keyword.id){
                        bool = true;
                    }
                })
                if(bool == false){
                    $('#renyuan2').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')

                    var jxs_id = $('#remainMan').val()
                    var net_id = $('#remainMan2').val()

                    //ajax搜索产品相关信息
                    $.post('{:url("search_product_by_id")}',{id:keyword.id,jxs_id:jxs_id,net_id:net_id},function (data) {
                        $('#table1 tbody').append(data)
                    })

                }
            });
            $("#categoryName").bsSuggest('enable')
        });
    }).on('onUnsetSelectValue', function () {
        console.log("onUnsetSelectValue");
    });

    $('body').on('input','.aa',function () {
        //计算平均值和总值
        var thisval = $(this).val()
        //这一行所有的月值
        var sum = 0
        var avg=0
        $(this).closest('tr').find('.aa').each(function (i,o) {
            console.log($(o).val())
            var val = $(o).val()
            sum += parseInt(val==''?0:val)
            if(!(val==''||val==0))
                avg+=1
        })
        $(this).closest('tr').find('.sum').val(sum)
        $(this).closest('tr').find('.avg').val((sum/avg).toFixed(2))
    })

    $("#remainMan2").click(function () {
        if($('#remainMan').val()==''){
            swal('请先选择经销商')
            return false;
        }
    })
    //网点搜索自动补全
    $("#remainMan2").bsSuggest({
        showBtn: false,     //不显示下拉按钮
    })
    $("#remainMan2").bsSuggest('disable')

    //关闭经销商选择
    $('#jxs_queding .close').click(function () {
        $(this).closest('#jxs_queding').hide().find('.inin').html('')
        $('#jxs_input').show().find('input').val('')
        $('#jxs_queding2').hide().find('.inin').html('')
        $('#jxs_input2').show().find('input').val('')
         $("#remainMan2").bsSuggest('destroy')
        $("#categoryName").bsSuggest('destroy');
        $("#renyuan2").html("");
        $("#table1 tbody").html("");

    })
    //关闭网点选择
    $('#jxs_queding2 .close').click(function () {
        $(this).closest('#jxs_queding2').hide().find('.inin').html('')
        $('#jxs_input2').show().find('input').val('')
        $("#categoryName").bsSuggest('destroy');
        $("#renyuan2").html("");
        $("#table1 tbody").html("");
    })

    //弹出经销商树
    $('#select').click(function () {
        var index = parent.layer.getFrameIndex(window.name)
        parent.layer.open({
            type:2,
            area:['60%','60%'],
            maxmin:true,
            content:'{:url("selectJXS")}?index='+index
        })
        return  false
    })

    //弹出网点树
    $('#select2').click(function () {
        if($('#remainMan').val()==''){
            swal('请先选择经销商')
            return false;
        }

        var index = parent.layer.getFrameIndex(window.name)
        parent.layer.open({
            type:2,
            area:['60%','60%'],
            maxmin:true,
            content:'{:url("selectNet")}?index='+index+'&keyword='+$('#remainMan').val()
        })
        return false
    })

    //返回
    var cancelBack = document.getElementById('cancelBack')
    cancelBack.onclick = function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }



    //提交
    $('#tijiao').on('click', function () {
        var form = $('#add')
        var serial = form.serialize()
       //alert(form.attr('action'))
       $.ajax({
            'type': 'post',
            'url': "{:url('newadd')}",
            'data': serial,
            'dataType': 'json',
            'success': function (data) {
               // alert(data);
               if (data.success) {
                    swal({
                        title: data.msg,
                        type: "success"
                    }, function () {
                        parent.history.go(0)
                    });

                } else
                    swal({
                        title: data.msg,
                        type: "warning"
                    });
            }
        })
        return false
    })

</script>
</body>

</html>